<template>
  <a-modal
    :visible="visible"
    title-align="start"
    :ok-text="$t('modal.operation.save')"
    :cancel-text="$t('modal.operation.cancel')"
    unmount-on-close
    @before-ok="handleSave"
    @close="handleClose"
    @cancel="handleCancel"
  >
    <template #title
      >{{
        saveId
          ? $t('searchTable.operation.edit')
          : $t('searchTable.operation.create')
      }}
    </template>
    <a-form ref="formRef" :rules="rules" :model="formData" auto-label-width>
      <a-form-item field="date" label="日期">
        <a-date-picker
          v-model="formData.date"
          format="YYYY-MM-DD"
          style="width: 100%"
        />
      </a-form-item>
      <a-form-item field="type" label="类型">
        <a-select v-model="formData.type">
          <a-option v-for="(item, key) in typeConfig" :key="key" :value="key">
            {{ item.label }}
          </a-option>
        </a-select>
      </a-form-item>
      <a-form-item field="title" label="标题">
        <a-input
          v-model="formData.title"
          allow-clear
          placeholder="请输入标题"
        ></a-input>
      </a-form-item>
      <a-form-item field="description" label="描述">
        <a-textarea
          v-model="formData.description"
          placeholder="请输入描述"
          :auto-size="{ minRows: 3, maxRows: 5 }"
        />
      </a-form-item>
      <a-form-item field="tags" label="标签">
        <a-input-tag
          v-model="formData.tags"
          placeholder="请输入标签"
          allow-clear
        />
      </a-form-item>
      <a-form-item field="link" label="链接">
        <a-input
          v-model="formData.link"
          placeholder="请输入链接（选填）"
          allow-clear
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { Message } from '@arco-design/web-vue';
  import {
    createTimeLine,
    editTimeLine,
    getTimeLineDetail,
  } from '@/api/timeline';
  import { TimeLineRecord } from '@/api/timeline/types';
  import { typeConfig } from '../config';

  const emit = defineEmits(['saveSuccess']);

  const formRef = ref();
  const formData = ref<TimeLineRecord>({
    id: undefined,
    date: '',
    type: 'blog',
    title: '',
    description: '',
    tags: [],
    link: '',
  });
  const visible = ref(false);
  const saveId = ref();
  const rules = {
    date: [{ required: true, message: '请选择日期' }],
    type: [{ required: true, message: '请选择类型' }],
    title: [{ required: true, message: '请输入标题' }],
    description: [{ required: true, message: '请输入描述' }],
    tags: [{ required: true, message: '请输入至少一个标签' }],
  };

  const handleSave = async () => {
    try {
      const isInvalid = await formRef.value?.validate();
      if (isInvalid) return false;
      // 保存和编辑
      if (saveId.value) {
        await editTimeLine(formData.value);
      } else {
        await createTimeLine(formData.value);
      }
      visible.value = false;
      Message.success('保存成功');
      emit('saveSuccess');
      return true;
    } catch (error) {
      return false;
    }
  };
  // 编辑
  const handleEdit = async (id: number) => {
    saveId.value = id;
    const result = await getTimeLineDetail(id);
    formData.value = result.data;
    visible.value = true;
  };
  const handleOpen = () => {
    visible.value = true;
  };
  const handleCancel = () => {
    visible.value = false;
  };
  // 对话框关闭后触发
  const handleClose = () => {
    formRef.value.resetFields();
    saveId.value = undefined;
  };
  defineExpose({
    handleOpen,
    handleEdit,
  });
</script>

<style scoped lang="less"></style>
